﻿@page "/components/numberfield"
@page "/components/numerictextfield"
@page "/components/numeric-text-field"
@page "/components/spinbutton"
@page "/components/spin-button"

<PageOutlet Url="components/numberfield"
            Title="NumberField"
            Description="numberfield component of the bit BlazorUI components" />

<DemoPage Name="NumberField"
          SecondaryNames="@(["NumberInput"])"
          Description="A NumberField allows you to enter any number type and format you want. It could be a decimal number or integer number with a suffix and so on. Also, give you the capability to show or hide increment and decrement keys."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          SubEnums="componentSubEnums"
          PublicMembers="componentPublicMembers"
          GitHubUrl="Inputs/NumberField/BitNumberField.razor"
          GitHubDemoUrl="Inputs/NumberField/BitNumberFieldDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <div>Displays various basic configurations for the BitNumberField, including placeholders, disabled state, default values, step values, and required fields.</div>
        <br />
        <div class="example-box">
            <BitNumberField Label="Basic" TValue="int?" />
            <br />
            <BitNumberField Label="Disabled & DefaultValue" DefaultValue="1363" IsEnabled="false" />
            <br />
            <BitNumberField Label="Placeholder" TValue="int?" Placeholder="Enter a number..." />
            <br />
            <BitNumberField Label="Required" TValue="int?" Required />
        </div>
    </DemoExample>

    <DemoExample Title="Label" RazorCode="@example2RazorCode" Id="example2">
        <div>Demonstrates various label configurations for BitNumberField, including different label positions and custom label templates.</div>
        <br />
        <div class="example-box">
            <div>Label position:</div>
            <br />
            <BitNumberField Label="Top (default)" TValue="int" />
            <br />
            <BitNumberField Label="Start" LabelPosition="BitLabelPosition.Start" TValue="int" />
            <br />
            <BitNumberField Label="End" LabelPosition="BitLabelPosition.End" TValue="int" />
            <br />
            <BitNumberField Label="Bottom" LabelPosition="BitLabelPosition.Bottom" TValue="int" />
            <br /><br /><br /><br />
            <div>LabelTemplate:</div>
            <br />
            <BitNumberField TValue="int">
                <LabelTemplate>
                    <div style="display:flex;align-items:center;gap:10px">
                        <BitLabel Style="color:green;">This is custom Label</BitLabel>
                        <BitIcon IconName="@BitIconName.Filter" Style="font-size:18px;" />
                    </div>
                </LabelTemplate>
            </BitNumberField>
        </div>
    </DemoExample>

    <DemoExample Title="Icons" RazorCode="@example3RazorCode" Id="example3">
        <div>Demonstrates BitNumberField with different icons, including component icon and increment/decrement icons in various modes.</div>
        <br />
        <div class="example-box">
            <div> Component's Icon:</div>
            <BitNumberField Label="Label & Icon" TValue="int"
                            IconName="@BitIconName.Lightbulb" />
            <br /><br /><br />
            <div> Increment & Decrement Icons:</div>
            <br />
            <BitNumberField Label="Compact mode" TValue="int"
                            Mode="BitSpinButtonMode.Compact"
                            IncrementIconName="@BitIconName.LikeSolid"
                            DecrementIconName="@BitIconName.DislikeSolid" />
            <br />
            <BitNumberField Label="Inline mode" TValue="int"
                            Mode="BitSpinButtonMode.Inline"
                            IncrementIconName="@BitIconName.Forward"
                            DecrementIconName="@BitIconName.Back" />
            <br />
            <BitNumberField Label="Spread mode" TValue="int"
                            Mode="BitSpinButtonMode.Spread"
                            IncrementIconName="@BitIconName.CalculatorAddition"
                            DecrementIconName="@BitIconName.CalculatorSubtract" />
        </div>
    </DemoExample>

    <DemoExample Title="ShowClearButton" RazorCode="@example4RazorCode" Id="example4">
        <div>Showcasing BitNumberField with a clean button in various configurations, including custom button icon and show this button.</div>
        <br />
        <div class="example-box">
            <BitNumberField Label="Age" TValue="int?" ShowClearButton DefaultValue="28" />
        </div>
    </DemoExample>

    <DemoExample Title="NumberFormat" RazorCode="@example5RazorCode" Id="example5">
        <div>Demonstrates various number formatting options for BitNumberField, including examples with different number formats.</div>
        <br />
        <div class="example-box">
            <BitNumberField Label="N0" DefaultValue="1234567890d" NumberFormat="N0" />
            <br />
            <BitNumberField Label="C0" DefaultValue="150" NumberFormat="C0" />
            <br />
            <BitNumberField Label="000000" DefaultValue="1363" NumberFormat="000000" />
        </div>
    </DemoExample>

    <DemoExample Title="Prefix & Suffix" RazorCode="@example6RazorCode" Id="example6">
        <div>Demonstrates the use of prefixes and suffixes in BitNumberField, including examples with different prefix and suffix values.</div>
        <br />
        <div class="example-box">
            <BitNumberField TValue="int" Label="Prefix" Prefix="Distance:" />
            <br />
            <BitNumberField TValue="int" Label="Suffix" Suffix="km" />
            <br />
            <BitNumberField TValue="int" Label="Prefix & Suffix" Prefix="Distance:" Suffix="km" />
            <br />
            <BitNumberField TValue="int" Label="With buttons" Prefix="Distance:" Suffix="km" ShowButtons="true" />
            <br />
            <BitNumberField TValue="int" Label="Disabled" Prefix="Distance:" Suffix="km" IsEnabled="false" />
        </div>
    </DemoExample>

    <DemoExample Title="Binding" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
        <div>Demonstrates various binding scenarios with BitNumberField, including one-way and two-way binding.</div>
        <br />
        <div class="example-box">
            <div>
                <BitNumberField Label="One-way" Value="oneWayValue" />
                <BitRating @bind-Value="oneWayValue" />
            </div>
            <br />
            <div>
                <BitNumberField Label="Two-way" @bind-Value="twoWayValue" />
                <BitRating @bind-Value="twoWayValue" />
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="Min & Max" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
        <div>Demonstrates setting minimum and maximum values in BitNumberField, including examples with various min and max constraints.</div>
        <br />
        <div class="example-box">
            <BitNumberField Label="Min = 0" Min="0" @bind-Value="minValue" />
            <div>value: [@minValue]</div>
            <br />
            <BitNumberField Label="Max = 100" Max="100" @bind-Value="maxValue" />
            <div>value: [@maxValue]</div>
            <br />
            <BitNumberField Label="Min & Max (-10, 10)" Min="-10" Max="10" @bind-Value="minMaxValue" />
            <div>value: [@minMaxValue]</div>
        </div>
    </DemoExample>

    <DemoExample Title="Precision" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
        <div>Specifies how many decimal places the value is rounded to.</div>
        <br />
        <div class="example-box">
            <BitNumberField Precision="2" @bind-Value="precisionInputValue" Label="Rounding to 2 Decimal Places" />
        </div>
    </DemoExample>

    <DemoExample Title="HideInput" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
        <div>Demonstrates hiding the input field in BitNumberField while still allowing value changes.</div>
        <br />
        <div class="example-box">
            <div>Hidden input:</div>
            <br />
            <BitNumberField HideInput
                            @bind-Value="hideInputValue"
                            Mode="BitSpinButtonMode.Inline"
                            Label="@hideInputValue.ToString()" />
        </div>
    </DemoExample>

    <DemoExample Title="InvertMouseWheel" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
        <div>Reverse the default scrolling behavior when adjusting numerical value in a number field using the mouse wheel.</div>
        <br />
        <div class="example-box">
            <BitToggle @bind-Value="invertMouseWheel" Text="Invert Mouse Wheel" />
            <br />
            <BitNumberField InvertMouseWheel="invertMouseWheel" Label="Use Shift + Mouse Wheel" TValue="int" />
        </div>
    </DemoExample>

    <DemoExample Title="Events" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
        <div>Handle events in BitNumberField, including increment, decrement, and change events.</div>
        <br />
        <div class="example-box">
            <BitNumberField Label="OnIncrement & OnDecrement" ShowButtons="true"
                            OnIncrement="(double v) => onIncrementCounter++"
                            OnDecrement="(double v) => onDecrementCounter++" />
            <div>OnIncrement Counter: @onIncrementCounter</div>
            <div>OnDecrement Counter: @onDecrementCounter</div>
            <br />
            <BitNumberField Label="OnChange" OnChange="(double v) => onChangeCounter++" />
            <div>OnChange Counter: @onChangeCounter</div>
        </div>
    </DemoExample>

    <DemoExample Title="Validation" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
        <div>Demonstrates validation for BitNumberField within a form, including required fields and custom validation messages.</div>
        <br />
        <div class="example-box">
            @if (string.IsNullOrEmpty(SuccessMessage))
            {
                <EditForm Model="@validationModel" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
                    <DataAnnotationsValidator />

                    <BitNumberField Label="@($"Age: [{validationModel.Age}]")" @bind-Value="validationModel.Age" />
                    <ValidationMessage For="@(() => validationModel.Age)" />
                    <br />
                    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
                </EditForm>
            }
            else
            {
                <BitMessage Color="BitColor.Success">@SuccessMessage</BitMessage>
            }
        </div>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example14RazorCode" Id="example14">
        <div>Explores styling and class customization for BitNumberField, including component styles, custom classes, and detailed style options.</div>
        <br /><br />
        <div class="example-box">
            <div>Component's Style & Class:</div>
            <br />
            <BitNumberField DefaultValue="10" Style="box-shadow: aqua 0 0 1rem; margin-inline: 1rem;" />
            <br />
            <BitNumberField DefaultValue="20" Class="custom-class" />
            <br /><br /><br />
            <div><b>Styles</b> & <b>Classes</b>:</div>
            <br />
            <BitNumberField DefaultValue="1"
                            Label="Styles"
                            Styles="@(new() { Root = "margin-inline: 1rem;",
                                              Focused = "--focused-background: #b2b2b25a;",
                                              InputContainer = "background: var(--focused-background);",
                                              Label = "text-shadow: aqua 0 0 1rem; font-weight: 900; font-size: 1.25rem;",
                                              Input = "padding: 0.5rem;" })" />
            <br />
            <BitNumberField TValue="int?"
                            Label="Classes"
                            @bind-Value="classesValue"
                            Classes="@(new() { Root = "custom-root",
                                               InputContainer = "custom-input-wrapper",
                                               Focused = "custom-focus",
                                               Input = "custom-input",
                                               Label = $"custom-label{(classesValue is null ? string.Empty : " custom-label-top")}" })" />
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example15RazorCode" Id="example15">
        <div>Use BitNumberField in right-to-left (RTL).</div>
        <br />
        <div dir="rtl">
            <div class="example-box">
                <CascadingValue Value="BitDir.Rtl">
                    <BitNumberField Label="برچسب در بالا" TValue="int" ShowButtons />
                    <br />
                    <BitNumberField Label="برچسب درخط" TValue="int" InlineLabel />
                    <br />
                    <BitNumberField TValue="int" Required />
                    <br />
                    <BitNumberField Label="الزامی" TValue="int" Required />
                </CascadingValue>
            </div>
        </div>
    </DemoExample>
</DemoPage>